<template>
  <view class="report-complaint-detail">
    <view class="box-border pt-[5rpx] bg-white">
      <up-tabs
        :list="tabs"
        lineColor="#0A8CFE"
        lineWidth="70rpx"
        :activeStyle="{ color: '#0A8CFE', fontSize: '29rpx' }"
        :inactiveStyle="{ color: '#000', fontSize: '29rpx' }"
        @click="onTypeItem"
      >
      </up-tabs>
    </view>
    <view class="top-line mt-[-4rpx]"></view>
    <template v-if="list.length">
      <view
        class="bg-white px-6 py-4 box-border mt-2.5"
        v-for="(item, index) in list"
        :key="index"
      >
        <view class="text-[29rpx]">
          <view class="mb-3.5 flex">
            <text class="text-[#8A8A8A] whitespace-nowrap">投诉内容：</text>
            <text class="text-[#000000]">{{ item.content }}</text>
          </view>
          <view class="mb-3.5 flex">
            <text class="text-[#8A8A8A] whitespace-nowrap">投诉对象：</text>
            <text class="text-[#000000]"> {{ item.users.join("、") }}</text>
          </view>
          <view class="mb-3.5 flex" v-if="item.imgUrl && item.imgUrl.length">
            <text class="text-[#8A8A8A] whitespace-nowrap"
              >图&emsp;&emsp;片：</text
            >
            <view class="flex flex-wrap">
              <up-album
                :urls="item.imgUrl"
                space="20rpx"
                singleSize="155rpx"
                multipleSize="155rpx"
                autoWrap
                :maxCount="3"
                unit="rpx"
              ></up-album>
            </view>
          </view>
          <view class="mb-3.5 flex">
            <text class="text-[#8A8A8A] whitespace-nowrap">投诉人员：</text>
            <text class="text-[#000000]"
              >{{ item.complaintUserName }}
              {{ EncryptTel(item.phonenumber) }}</text
            >
          </view>
          <view class="mb-3.5 flex">
            <text class="text-[#8A8A8A] whitespace-nowrap">投诉时间：</text>
            <text class="text-[#000000]">{{
              item.createTime
                ? dayjs(item.createTime).format("YYYY-MM-DD hh:mm:ss")
                : ""
            }}</text>
          </view>
          <view class="flex items-center">
            <text class="text-[#8A8A8A] whitespace-nowrap">是否有效：</text>
            <view
              class="text-[#000000] flex items-center"
              v-if="item.effectiveStatus === 2"
              >未设置
              <button
                class="btn-038AFE text-[32rpx] h-[49rpx] leading-[49rpx] ml-5"
                @click="showStatusPopup(item)"
              >
                状态设置
              </button>
            </view>
            <template v-else>
              <!-- @click="showStatusPopup(item)" -->
              <view
                class="text-white bg-[#F55300] rounded-1 text-[32rpx] py-[5rpx] px-2.5 box-border"
                v-if="item.effectiveStatus == 1"
                >有效</view
              >
              <view
                class="text-white bg-[#BBBBBB] rounded-1 text-[32rpx] py-[5rpx] px-2.5 box-border"
                v-else
                >无效</view
              >
            </template>
          </view>
        </view>
      </view>
    </template>
    <up-empty
      v-else
      mode="data"
      text="暂无记录"
      icon="http://cdn.uviewui.com/uview/empty/data.png"
    >
    </up-empty>
    <up-gap height="10"></up-gap>
    <up-toast ref="uToastRef"></up-toast>
    <up-popup
      :show="showPopup"
      :round="8"
      mode="center"
      :closeOnClickOverlay="true"
      @close="showPopup = false"
    >
      <view
        class="px-5.25 py-3.5 box-border flex flex-col justify-center items-center w-[75vw]"
      >
        <view
          class="flex flex-row items-center justify-center mb-[75rpx] mt-[30rpx]"
        >
          <text class="text-black text-[28rpx]">是否有效评价：</text>
          <up-radio-group
            v-model="form.effectiveStatus"
            placement="row"
            labelColor="#000000"
          >
            <up-radio activeColor="#0189FE" :name="1" label="有效"></up-radio>
            <up-radio activeColor="#0189FE" :name="0" label="无效"></up-radio>
          </up-radio-group>
        </view>
        <button
          class="btn-0189FE h-[83rpx] leading-[83rpx] text-[33rpx] w-[100%]"
          @click="onsubmit"
        >
          确 认
        </button>
      </view>
    </up-popup>
  </view>
</template>

<script setup lang="ts">
import {
  listComplaint,
  updateComplaintStatus,
  complaintStatCount,
} from "@/api/complaint/index";
import { EncryptTel } from "@/utils/tools";
import { imgPrefix } from "@/config/app";
import dayjs from "dayjs";
import { useUserInfoStore } from "@/stores/userInfo";
const userInfoStore = useUserInfoStore();

const uToastRef = <any>ref(null);
const data = reactive({
  queryParam: {
    pageNum: 1,
    pageSize: 10,
    communityId: undefined,
    effectiveStatus: <any>"",
    type: undefined,
    yearMonth: undefined,
  },
  countQuery: {
    communityId: undefined,
    type: undefined,
    yearMonth: undefined,
  },
  tabs: [{ name: "全部" }, { name: "有效投诉" }, { name: "无效投诉" }],
  list: <any>[],
  total: 0,
  form: {
    id: undefined,
    effectiveStatus: null,
  },
});
const { queryParam, countQuery, tabs, list, total, form } = toRefs(data);
const current = ref(0);
const showPopup = ref(false);

// tab切换
const onTypeItem = (item: any) => {
  current.value = item.index;
  switch (item.index) {
    case 0:
      queryParam.value.effectiveStatus = "";
      break;
    case 1:
      queryParam.value.effectiveStatus = 1; // 0无效 1有效
      break;
    case 2:
      queryParam.value.effectiveStatus = 0;
      break;
    default:
      break;
  }
  list.value = [];
  total.value = 0;
  queryParam.value.pageNum = 1;
  getComplaintList();
};
// 举报投诉列表
const getComplaintList = () => {
  listComplaint(queryParam.value)
    .then((res: any) => {
      const { data } = res;
      data.records = data.records ?? [];
      data.records = arrProcess(data.records);
      list.value = [...list.value, ...data.records];
      total.value = data.total;
    })
    .catch((err: any) => {
      uToastRef.value.show({
        type: "error",
        message: err,
      });
    });
};
// 举报投诉统计数
const getComplaintCount = () => {
  complaintStatCount(countQuery.value)
    .then((res: any) => {
      const { data } = res;
      tabs.value[0].name = `全部（${data.sumCount}）`;
      tabs.value[1].name = `有效投诉（${data.invalidCount}）`;
      tabs.value[2].name = `无效投诉（${data.effectiveCount}）`;
    })
    .catch((err: any) => {
      uToastRef.value.show({
        type: "error",
        message: err,
      });
    });
};
// 数据处理 组合对象内容
const arrProcess = (arr: Array<any>) => {
  if (arr.length) {
    arr = arr.map((item: any) => {
      let badgeNumberArr = <any>[];
      let policeNameArr = <any>[];
      if (item.badgeNumber && item.badgeNumber.includes("、")) {
        badgeNumberArr = item.badgeNumber.split("、");
      }
      if (item.policeName && item.policeName.includes("、")) {
        policeNameArr = item.policeName.split("、");
      }
      item.users = <any>[];
      if (badgeNumberArr.length && policeNameArr.length) {
        policeNameArr.forEach((it: any, index: number) => {
          item.users.push(
            item.communityName + " " + it + " " + badgeNumberArr[index]
          );
        });
      } else {
        item.users.push(
          item.communityName + " " + item.policeName + " " + item.badgeNumber
        );
      }
      if (item.imgUrl) {
        item.imgUrl = item.imgUrl.split(",");
        if (item.imgUrl.length) {
          item.imgUrl = item.imgUrl.map((img: any) => {
            img = imgPrefix + img;
            return img;
          });
        }
      }
      return item;
    });
  }
  return arr;
};
// 展示状态改变弹框
const showStatusPopup = (row: any) => {
  form.value.id = row.id;
  form.value.effectiveStatus = row.effectiveStatus;
  showPopup.value = true;
};
// 改变投诉有效状态
const onsubmit = () => {
  updateComplaintStatus(form.value)
    .then((res: any) => {
      uToastRef.value.show({
        type: "success",
        message: "状态设置成功",
      });
      showPopup.value = false;
      list.value = [];
      total.value = 0;
      getComplaintList();
      getComplaintCount();
    })
    .catch((err: any) => {
      uToastRef.value.show({
        type: "error",
        message: err,
      });
    });
};
onLoad((options) => {
  if (options && options.detailInfo) {
    let detailInfo = JSON.parse(options.detailInfo);
    queryParam.value.communityId = detailInfo.communityId;
    queryParam.value.type = options.type;
    queryParam.value.yearMonth = options.yearMonth;
    countQuery.value.communityId = detailInfo.communityId;
    countQuery.value.type = options.type;
    countQuery.value.yearMonth = options.yearMonth;
    getComplaintList();
    getComplaintCount();
  }
});
onReachBottom(() => {
  let allTotal = queryParam.value.pageNum * queryParam.value.pageSize;
  if (allTotal < total.value) {
    queryParam.value.pageNum++;
    getComplaintList();
  } else {
    uToastRef.value.show({
      type: "info",
      message: "暂无更多数据",
    });
    return;
  }
});
</script>

<style lang="scss" scoped>
.report-complaint-detail {
  ::v-deep .u-tabs__wrapper__nav__item {
    padding: 0 40rpx;
    width: 33%;
  }
  ::v-deep .u-album__row__wrapper > image {
    width: 150rpx !important;
    height: 104rpx !important;
  }
  ::v-deep .u-radio:last-child {
    margin-left: 30rpx;
  }
}
</style>
